<template>
    <div class="">
        <div style="margin-bottom: 10px">
            <a-space>
                <!-- 返回 -->
                <a-button type="primary" @click="router.back()" title="返回">
                    <rollback-outlined />
                </a-button>
                tags:
                <a-select
                    v-model:value="select_obj.list"
                    :options="select_obj.options"
                    mode="multiple"
                    placeholder="选择图片tag标签"
                    style="width: 500px"
                    @change="select_obj.change"
                ></a-select>
            </a-space>
        </div>
        <div v-show="select_obj.list.length">
            <a-upload-dragger v-model:fileList="fileList" name="file" :multiple="true" :customRequest="customRequest">
                <p class="ant-upload-drag-icon">
                    <inbox-outlined></inbox-outlined>
                </p>
                <p class="ant-upload-text">点击或者拖拽文件到该区域上传</p>
                <p class="ant-upload-hint">支持单次或批量上传</p>
            </a-upload-dragger>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { message } from "ant-design-vue";
    import { InboxOutlined, RollbackOutlined } from "@ant-design/icons-vue";
    import { dirListApi, imgUploadApi } from "@/api/imgStore";
    import { useRouter } from "vue-router";
    import type { UploadRequestOption } from "ant-design-vue/es/vc-upload/interface";
    import {  useDebounceFn } from "@vueuse/core";
    const router = useRouter();

    // 获取目录id
    const id = parseInt(router.currentRoute.value.params.id.toString());

    // 上传数据
    const upload_data = reactive({
        dirname: "",
        tags: ""
    });

    // 选择框
    const select_obj = reactive({
        list: [],
        options: [],
        change: (value: string[]) => {
            upload_data.tags = value.join(",");
        }
    });

    // 获取标签
    dirListApi({}, "get", id).then(({ data }) => {
        if (data.code == 200) {
            upload_data.dirname = data.dirname;
            const tags = data.tags;
            select_obj.options = tags.split(",").map((item: string) => {
                return { label: item, value: item };
            });
        }
    });

    const fileList = ref([]);
    const taskList = ref<Array<{ form: FormData; e: UploadRequestOption }>>([]);
    const customRequest = (e: UploadRequestOption) => {
        const form = new FormData();
        form.append("file", e.file);
        form.append("dirname", upload_data.dirname);
        if (upload_data.tags.length < 1) {
            message.error("请选择标签");
            return;
        }
        form.append("tags", upload_data.tags);
        taskList.value.push({ form, e });
        startScheduledTasks();
    };
    const startScheduledTasks = useDebounceFn(async () => {
        for (const task of taskList.value) {
            const { data } = await imgUploadApi(task.form);
            if (data.code == 200) {
                if (task.e.onSuccess) {
                    task.e.onSuccess("上传成功!");
                }
            } else {
                if (task.e.onError) {
                    // @ts-ignore
                    task.e.onError(null, "上传失败!");
                }
            }
        }
        message.success("上传完成!");
    }, 500);
</script>

<style lang="scss" scoped></style>
